import React, { useEffect, useState } from 'react'
/**
   * < 768 超小屏幕
   * >= 768 && < 992 小屏幕
   * >= 992 && < 1200 中屏幕
   * >= 1200  大屏幕
   */
export default function useScreen() {
  //声明一个状态
  let [type, setType] = useState('');
  //声明副作用的回调函数
  useEffect(() => {
    //声明一个函数
    let getType = () => {
      //获取视口的宽度
      let w = document.documentElement.clientWidth;
      let type = '';
      //判断
      if (w < 768) {
        type = '超小屏幕'
      } else if (w >= 768 && w < 992) {
        type = '小屏幕'
      } else if (w >= 992 && w < 1200) {
        type = '中屏幕'
      } else {
        type = '大屏幕'
      }
      //返回 type 
      setType(type);
    }
    //获取当前屏幕的状态
    getType();

    window.addEventListener('resize', () => {
      getType();
      //更新状态
    })
  }, []);
  //返回
  return type;
}
